昨天 Day19 提到了 cookie，但是它有一些限制，像是

1. 大小約 4kb
2. 每次 request 時都會帶上

那如果我們只是需要單純將一些不重要但常用到的資料存在用戶端呢?

這時候我們可以使用 HTML5 新增的 localStorage，它的特點為

1. 不會過期、除非手動清除
2. 大小預設有 5mb
3. 每次 request 不會帶上

和 localStorage 常常被一起討論的是 sessionStorage，它和 localStorage 除了存活時間以外，其他特性都一樣，sessionStorage 在每次分頁或瀏覽器關掉後就會清除。

要在哪裡查看它們呢?

一樣可以到瀏覽器自帶的開發者工具查看:

那接下來就來看看 JS 如何操作它們吧!

localStorage

瀏覽器儲存在本地端的資料，格式為 key : value。

需要注意的是「value 的型態只有 String」!

setItem 建立

以下範例為: 儲存一個名稱為 userName 的屬性，而它的值為 Bob。

var name = 'Bob';
localStorage.setItem('userName', name);

getItem 取得

取得特定屬性的值，

localStorage.getItem('userName'); // Bob

範例

結合上述兩者，範例中提供了一個輸入框，能夠儲存名字，並且在點選顯示名字的按鈕時，從 localStorage 撈出 userName。

動手玩

<h2>請輸入你的名字:</h2>
<input type="text" id="userName">
<input type="button" id="submit" value="送出">
<input type="button" id="showName" value="顯示名字">

var submit = document.getElementById('submit');
submit.addEventListener('click', function(){
  var name = document.getElementById('userName').value;
  localStorage.setItem('userName', name);
  alert("saved");
});

var showName = document.getElementById('showName');
showName.addEventListener('click', function(){
  var name = localStorage.getItem('userName');
  alert(name);
});

removeItem 移除

移除一個特定的屬性，

localStorage.removeItem('userName');

全部移除

因為 localStorage 不會自己過期，若是想要一次清除，可以使用這個方法，

localStorage.clear();

sessionStorage

相似於 localStorage ，不同之處在於 sessionStorage 在瀏覽器關掉後就自動清除。

建立

sessionStorage.setItem("key", value);

取得

sessionStorage.getItem('key');

移除

sessionStorage.removeItem("key");

問題與討論

由於 value 只能存入 String ，所以無法儲存其他類型的數據，Ex: Array、Object...
所以可以使用 JSON 的方法來轉換，好方便存取。

JSON 是一種資料交換的格式，如果有不清楚的，我會在明天提到 Ajax 時再更詳細介紹。

JSON 字串轉換

轉換成字串 JSON.stringify

使用 JSON.stringify 將其他類型的數據轉為字串。

var arr = ['a','b','c'];

console.log(arr + " is " + typeof(arr));
// [a, b, c] is object

var arrToStr = JSON.stringify(arr);

console.log(arrToStr + " is " + typeof(arrToStr));
// [\"a\",\"b\",\"c\"] is string

轉換回原本格式 JSON.parse

使用 JSON.parse 解析轉換過的陣列字串，將它還原成原先類型。

var strToArr = JSON.parse(arrToStr);

console.log(strToArr + " is " + typeof(strToArr));
// [a, b, c] is object

那今日的分享就到這，我們明天見